'use client'

import React from 'react'
import {Swiper, SwiperSlide, useSwiper} from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';


const SlidePrevButton = (props: { swiperIndex: number }) => {
  const {swiperIndex} = props;
  const swiper = useSwiper();
  return (
    <div className="absolute left-5 bottom-5 z-20">
      <ul className="flex">
        <li className="w-9 h-1 bg-white cursor-pointer" onClick={() => swiper.slideTo(0)}
            style={{background: swiperIndex === 0 ? 'black' : ''}}></li>

        <li className="w-9 h-1 ml-2 bg-white cursor-pointer" onClick={() => swiper.slideTo(1)}
            style={{background: swiperIndex === 1 ? 'black' : ''}}></li>

        <li className="w-9 h-1 ml-2 bg-white cursor-pointer" onClick={() => swiper.slideTo(2)}
            style={{background: swiperIndex === 2 ? 'black' : ''}}></li>

        {/*<li className="w-9 h-1 ml-2 bg-white cursor-pointer" onClick={() => swiper.slideTo(3)}*/}
        {/*    style={{background: swiperIndex === 3 ? 'black' : ''}}></li>*/}
      </ul>
    </div>
  );
};

const SlideShow = () => {
  const [swiperIndex, setSwiperIndex] = React.useState<number>(0);
  const [imgList] = React.useState<{
    img: string,
    title: string,
    title1: string,
    tags: string []
  }[]>([
    {
      img: '/images/material/5.jpg',
      title: '2023年免费样片合集',
      title1: '激发你设备的超级画质',
      tags: ['杜比视界', '免费', '4K']
    },
    {
      img: '/images/material/6.jpg',
      title: '山海经动态壁纸',
      title1: '探寻未知海洋生物',
      tags: ['山海经里有什么', '免费', '静态&动态壁纸']
    },
    {
      img: '/images/material/7.jpg',
      title: '芯片之美',
      title1: '芯片微缩摄影',
      tags: ['芯片放大数万部', '免费']
    }
  ]);


  return <div
    className="relative border overflow-hidden
                xs:col-span-2 xs:grid-rows-3
                md:col-span-2 md:grid-rows-3
                lg:row-span-3 row-span-3
              h-full ">
    {/*我是轮播图*/}
    <Swiper
      loop={true}
      style={{height: '100%'}}
      spaceBetween={50}
      slidesPerView={1}
      onSlideChange={({activeIndex}) => setSwiperIndex(activeIndex)}
      onReachEnd={() => console.log('reach end')}
    >
      {imgList && imgList.map((item, index) => {
        return <SwiperSlide key={index}>
          <img src={item.img} className="h-full relative"/>
          <div className="absolute left-3 bottom-[50px] z-20">
            <p
              className="font-bold text-white xl:text-3xl lg:text-3xl md:text-2xl sm:text-2xl xs:text-xl mb-1">{item.title}</p>
            <p
              className="font-bold text-white xl:text-xl lg:text-xl md:text-base  xs:text-xs mb-2">{item.title1}</p>
            <ul className="flex">
              {item.tags.map((tItem, tIndex) => {
                return tIndex === 0 ?
                  <li className=" text-white bg-black py-1 px-2 rounded-[8px] text-[0.6rem]" key={tIndex}>{tItem}</li> :
                  <li className="ml-2 text-white bg-black py-1 px-2 rounded-[8px] text-[0.6rem]" key={tIndex}>{tItem}</li>

              })}
              {/*<li className=" text-white bg-black py-1 px-2 rounded-[8px] text-[0.6rem]">杜比视界</li>*/}
              {/*<li className="ml-2 text-white bg-black py-1 px-2 rounded-[8px] text-[0.6rem]">免费</li>*/}
              {/*<li className="ml-2 text-white bg-black py-1 px-2 rounded-[8px] text-[0.6rem]">4K</li>*/}
            </ul>
          </div>
        </SwiperSlide>
      })}


      {/*<SwiperSlide>*/}
      {/*  <img src="/images/material/6.jpg" className="h-full relative"/>*/}
      {/*</SwiperSlide>*/}
      {/*<SwiperSlide>*/}
      {/*  <img src="/images/material/7.jpg" className="h-full relative"/>*/}
      {/*</SwiperSlide>*/}

      <SlidePrevButton swiperIndex={swiperIndex}/>
    </Swiper>


  </div>
}

export default SlideShow